<template>
  <div class="custom-table">
    <el-table
      v-bind="tableProps"
      :data="!!mappingFunc ? tableData.map(mappingFunc) : tableData"
      style="width: 100%"
    >

      <template v-for="{ key, ...item } in tableColumns">

        <el-table-column
          v-if="!!item.children"
          :key="key"
          :prop="key"
          v-bind="item"
        >
          <template slot-scope="scope">
            <template v-for="(child, childIdx) in item.children">

              <el-button
                :key="childIdx"
                v-if="child.type === 'btn'"
                v-bind="!!createDynamicProps ? createDynamicProps(child, scope.row) : child.props"
              >
                {{ child.label }}
              </el-button>

              <el-tag
                :key="childIdx"
                v-if="child.type === 'tag'"
                v-bind="!!createDynamicProps ? createDynamicProps(child, scope.row) : child.props"
              >
                {{ child.label }}
              </el-tag>

              <i
                :key="childIdx"
                v-if="child.type === 'icon'"
                v-bind="!!createDynamicProps ? createDynamicProps(child, scope.row) : child.props"
              />

              <!-- more type here -->

            </template>
          </template>
        </el-table-column>

        <el-table-column
          v-else
          :key="key"
          :prop="key"
          v-bind="item"
        />

      </template>
    </el-table>

    <el-pagination
      class="pagination"
      v-bind="{ ...DEFAULT_PAGINATION_PROPS, ...paginationProps }"
      @current-change="onCurrentPageChange"
      @size-change="onPageSizeChange"
    />

  </div>
</template>

<script>
import { DEFAULT_PAGINATION_PROPS } from './constants';

export default {
  props: {
    // table props
    tableProps: Object,
    tableColumns: Array,
    tableData: Array,
    mappingFunc: Function,
    createDynamicProps: Function,
    // pagination props
    paginationProps: Object,
  },
  data () {
    return {
      DEFAULT_PAGINATION_PROPS,
    };
  },
  methods: {
    onCurrentPageChange (currentPage) {
      this.$emit('currentChange', currentPage);
    },
    onPageSizeChange (newSize) {
      this.$emit('sizeChange', newSize);
    },
  },
}
</script>
